<template>
  <div class="ict-menber-view">
    <ict-titlebar :left-options="{showBack: true}" v-el:titlebar>合伙人中心</ict-titlebar>

    <div class="page">
      <scroller :lock-x="true" scrollbar-y v-ref:scroller :height.sync="scrollerHeight">
        <div class="">
          <div class="recommend-box">
            <div class="recommend" v-touch:tap="qrcodeRec">二维码邀请</div>
            <div class="recommend" v-touch:tap="menberRec">邀请开通合伙人</div>
          </div>
          <!-- <div class="shareInstruction">微信分享以上二维码和链接将会带有您的标识信息</div> -->
          <div class="recommend-box">
            <div class="recommend" v-touch:tap="material">素材库</div>
          </div>
          <!-- <div class="shareInstruction">微信分享院生故事内容页链接将会带有您的标识信息</div> -->
          <div class="menber-info-box">
            <div class="infoC">
              <div class="menber-info">
                  <p>合伙人到期时间</p>
                  <p>{{menberInfo.overTime}}</p>
              </div>
              <div class="menber-info">
                  <p>奖学金</p>
                  <p>{{menberInfo.totalAmount}}元</p>
              </div>
              <div class="menber-info">
                  <p>已提现金额</p>
                  <p>{{menberInfo.alreadyExtractAmount}}元</p>
              </div>
              <div class="menber-info">
                  <p>可提现金额</p>
                  <p>{{menberInfo.canExtractAmount}}元</p>
              </div>
              <div class="menber-info">
                  <p>已邀请人数</p>
                  <p>{{menberInfo.childIds ? menberInfo.childIds.length : 0}}个</p>
              </div>
              <div class="menber-info">
                  <p>推荐人</p>
                  <p>{{menberInfo.parentName ? menberInfo.parentName : '长投学堂'}}</p>
              </div>
              <div style="text-align: center;margin-top:1.5rem;">
                  <p>每日18点后定时更新</p>
              </div>
            </div>
            <div class="withdraw" v-touch:tap="withdraw"><p>提现</p></div>
          </div>
          <div class="instruction">
            <div class="instructionBtn" v-touch:tap="goMI">合伙人特权说明</div>
            <div class="instructionBtn" v-touch:tap="goRI">推广计划说明</div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
import Badge from 'vux/badge'
import IctTitlebar from '../../components/IctTitleBar.vue'
import IctButton from '../../components/IctButton.vue'
import IctItem from '../../components/IctItemButton.vue'
import {Flexbox, FlexboxItem} from 'vux/flexbox'
import Scroller from 'vux/scroller'
import {loadMenberInfo} from '../../vuex/menber/actions'
import {userGetters, menberGetters} from '../../vuex/getters'
export default {
  vuex: {
    actions: {
      loadMenberInfo: loadMenberInfo
    },
    getters: {
      userName: userGetters.userName,
      menberInfo: menberGetters.menberInfo
    }
  },

  data () {
    return {
      scrollerHeight: '600px'
    }
  },

  route: {
    data () {
      // 进入页面加载合伙人信息
      this.loadMenberInfo()
      const me = this
      setTimeout (function () {
        me.setScrollerHeight()
      }, 150)
    }
  },

  methods: {
    withdraw () {
      window.alert('请直接与官方联系')
    },
    material () {
      this.$router.go('/material-list')
    },
    qrcodeRec () {
      this.$router.go('/menber-recommend-qr')
    },
    menberRec () {
      this.$router.go('/menber-recommend')
    },
    goMI () {
      this.$router.go('/menber-instruction')
    },
    goRI () {
      this.$router.go('/recommend-instruction')
    },

    /**
     * 设置滚动条高度
     */
    setScrollerHeight () {
      // 设置滚动条高度为 页面高度-titlebar高度-tabbar高度
      const me = this
      const {titlebar} = this.$els
      const {tabBar} = me.$parent.$els

      me.scrollerHeight = (window.document.body.offsetHeight - titlebar.offsetHeight -
        (tabBar ? tabBar.offsetHeight : 0) - 7) + 'px'
      setTimeout(function () {
        me.$nextTick(() => {
          me.$refs.scroller.reset({
          top: 0
        })
      })
      }, 150)
    }
  },

  components: {
    IctTitlebar,
    IctButton,
    IctItem,
    Flexbox,
    FlexboxItem,
    Badge,
    Scroller
  }
}
</script>
<style lang="less">
  @import "../../assets/styles/icon.less";
  .ict-menber-view{
    font-size: 12px;
    p {
      margin: 0;
    }
    .ict-item:active {
      background-color: #ccc;
      color:black;
    }
    .into-icon:before{
      font-family: 'myicon';
      content: '\e913';
      color: #898989;
    }
    .ict-btn{
      width: 6.5rem;
      height: 1.8rem;
      border: 1px solid #00b0f0;
      border-radius: 5px;
      background: #fff;
      min-height: 0;
      padding: 0;
      color: #00b0f0;
      font-size: 0.85rem;
    }
    .itemOnFocus{
      background-color: black;
      color: white;
    }
  }
  /*分享*/
  .recommend-box {
    margin: 0.5rem;
    display: flex;
    background-color: white;
    .recommend {
      flex: 1;
      text-align: center;
      margin: 1rem;
      height:2rem;
      line-height:2rem;
      background-color: #00b0f0;
      color: white;
      font-size: 12px;
      /*padding: 0.5rem;*/
      border-radius: 5px;
    }
  }
  /*分享说明*/
  .shareInstruction {
    margin: -0.5rem 0.5rem 0.5rem 0.5rem;
    padding-bottom: 0.5rem;
    background-color: white;
    color: #aaa;
    text-align: center;
  }
  .menber-info-box {
    margin: 0.5rem 0.5rem 0rem 0.5rem;
    padding: 0.5rem;
    background-color: white;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    .infoC {
      padding: 0.5rem 0;
      background-color: white;
      margin: 1rem;
      text-align:left;
      .menber-info {
        padding-left: 2rem;
        padding-bottom: 1rem;
        display: flex;
        p {
          flex: 1;
          font-size: 12px;
        }
      }
    }
    .withdraw {
      color: white;
      /*margin: 1rem;*/
      p {
        font-size: 12px;
        margin: 3rem;
        /*padding: 0.5rem;*/
        height:2rem;
        line-height:2rem;
        background-color: #00b0f0;
        border-radius: 5px;
      }
    }
  }
  .instruction {
    font-size: 12px;
    margin: 0.5rem 0.5rem 0 0.5rem;
    background-color: white;
    display: flex;
    text-align: center;
    .instructionBtn {
      text-align:center;
      font-size: 12px;
      flex: 1;
      padding: 1rem;
      color: #00b0f0;
      text-align: center;
    }
  }
  .placeHold {
    margin: 5rem;
  }
</style>
